<template>
    <PageWrapper title="房东列表">
        <!-- 房东列表 -->
        <BasicTable @register="registerTable">
            <Spin :spinning="loading" tip="加载中..." />
            <template #category="{ text }">
                <Tag v-for="item in text" :key="item._id" color="geekblue">{{
                    item?.name ?? ''
                }}</Tag>
            </template>

            <template #uid="{ text }">
                <div>{{ text?.username ?? '' }}</div>
            </template>
            <template #cover="{ text }">
                <TableImg class="check-img" :imgList="[text]" :size="40" />
            </template>
            <template #lookNum="{ text }">
                <div>
                    <div>{{ text }}<Icon icon="flat-color-icons:up"></Icon></div>
                </div>
            </template>
            <!-- 审核状态 -->
            <template #status="{ text }">
                <Tag v-if="text == 1" color="green">审核通过</Tag>
                <Tag v-else-if="text == 2" color="red">审核拒绝</Tag>
                <Tag v-else color="geekblue">待审核</Tag>
            </template>
            <!-- 操作 -->
            <template #action="{ record }">
                <TableAction
                    :style="'height: 60px'"
                    v-if="record.is_top !== 1"
                    :actions="[
                        {
                            label: '审核',
                            icon: 'noto:pencil',
                            onClick: () => check(record),
                        },
                        {
                            label: '删除',
                            icon: 'noto:multiply',
                            popConfirm: {
                                title: '确定要删除吗?',
                                okText: '确定',
                                cancelText: '取消',
                                confirm: () => deleteTableEvent(record),
                            },
                        },
                    ]"
                />
            </template>
        </BasicTable>
        <Modal
            :selectItem="selectItem.item"
            @register="registerModal"
            @updateData="updateTable"
        ></Modal>
    </PageWrapper>
</template>

<script lang="ts">
    import { defineComponent, reactive, ref } from 'vue'
    import { Tag, message, Spin } from 'ant-design-vue'
    import { Icon } from '/@/components/Icon'
    import { PageWrapper } from '/@/components/Page'
    import { BasicTable, useTable, TableImg, TableAction } from '/@/components/Table'
    import { DataListParams, DataItem, DeleteParams } from '/@/api/content/video/model/index'
    import { Columns, FormConfig } from './model/model'
    import { listDataApi, deleteApi } from '../../../api/content/video/index'
    import { useModal } from '/@/components/Modal'
    import Modal from './components/auth.vue'
    const columns = [...Columns]

    export default defineComponent({
        name: 'LandlordList',
        components: { PageWrapper, BasicTable, Tag, TableImg, TableAction, Icon, Modal, Spin },
        setup() {
            const [registerTable, { reload }] = useTable({
                title: '视频列表',
                titleHelpMessage: '展示视频列表',
                canResize: true,
                useSearchForm: true,
                bordered: true,
                ellipsis: true,
                rowKey: '_id',
                showTableSetting: true,
                formConfig: FormConfig as any,
                actionColumn: {
                    title: '操作',
                    dataIndex: 'action',
                    fixed: 'left',
                    width: 240,
                    slots: { customRender: 'action' },
                },
                api: async (data) => {
                    const res = await listDataApi(data)
                    return {
                        items: res.list,
                        total: res.count,
                    }
                },
                beforeFetch: (pageData) => {
                    console.log('页面数据', pageData)
                    const data: DataListParams = {
                        title: pageData.title ? pageData.title : '',
                        page: pageData.page,
                        limit: pageData.pageSize,
                    }
                    return data
                },
                columns: columns,
            })
            // 审核弹窗
            const [registerModal, { openModal }] = useModal()
            const selectItem = reactive<{ item: any }>({
                item: null,
            })
            const loading = ref(false)

            const check = (record: DataItem) => {
                console.log(record)
                const { _id, category, title, desc, cover, file, uid } = record
                selectItem.item = {
                    _id,
                    category: category[0].name,
                    title,
                    desc,
                    cover,
                    file,
                    uid: uid.username || '',
                }
                openModal()
            }

            const deleteTableEvent = async (v: any) => {
                loading.value = true
                const data: DeleteParams = {
                    _id: v._id,
                }
                const res = await deleteApi(data)
                loading.value = false
                console.log(res)
                if (res) {
                    message.success('删除成功!')
                    reload()
                } else {
                    message.error('删除失败!')
                }
            }
            const updateTable = () => {
                reload()
            }

            return {
                registerTable,
                deleteTableEvent,
                selectItem,
                registerModal,
                check,
                updateTable,
                loading,
            }
        },
    })
</script>

<style lang="less">
    .vben-basic-table-img.check-img {
        height: 46px !important;
        align-content: center;
        justify-content: center;

        .ant-image {
            margin: auto;

            .ant-image-img {
                width: 40px;
                height: 40px;
                object-fit: cover;
            }
        }
    }

    .look {
        display: flex;
        align-items: center;
        text-align: center;
    }

    .unsend {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 46px;
    }
</style>
